<template>
  <t-pop :active="active" :withPop="withPop" @oncancel="oncancel">
    <div class="map-wrapper">
      <div class="map-lyer ui form">
        <div class="fields inline mapform">
          <el-amap-search-box class="field" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <div class="ui action input">
            <input type="text" v-model="params.show" readonly placeholder="坐标待选择">
            <button class="ui teal button" @click="confirm" :class="{disabled: !params.value[0]}">
              确定{{params.value.lng}}
            </button>
          </div>
        </div>
      </div>
      <div id="mapContainer">
        <el-amap vid="amap" ref="amap" :center="mapCenter" :plugin="plugin" :events="events" :zoom="zoom">
          <el-amap-marker :icon="picPos.icon" :position="picPos.pos" :draggable="draggable" v-if="picPos.pos" :events="markerEvnts"></el-amap-marker>
          <el-amap-marker v-for="marker in markers" :position="marker" :events="markerEvnts"></el-amap-marker>
        </el-amap>
      </div>
    </div>
  </t-pop>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';
  import Vue from 'vue';

  import tPop from '../tPop2'

  // 引入高德地图
  import tAMap  from 'vue-amap'; 
  Vue.use(tAMap); 

  tAMap.initAMapApiLoader({  
    // 申请的高德key  
    key: '92fb292edc9d0dd2fdd903d28c028401',  
    // 插件集合  
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.ToolBar']  
  }); 

  export default {
    data() {
      let _this = this;
      return {
        params:{
          name: "",
          value: {
            lng: "",
            lat: ""
          },
          show: "",
        },
        draggable: true,
        isshow: true,
        picPos:{
          icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
          pos: null
        },
        mapCenter:[121.59996, 31.197646],
        markers:[],
        zoom:15,
        plugin:[
          {
            pName: 'ToolBar',
            position: 'LB',
            liteStyle: true,
            locate: true,
          }
        ],
        events:{
          click(e) {
            _this.setPos(e);
          },
        },
        markerEvnts:{
          click(e){
            _this.setPos(e);
          },
          dragend(e){
            _this.setPos(e)
          }
        },
        searchOption:{
        },
        map: null
      }
    },
    components:{
      tPop
    },
    methods: {
      onSearchResult(pois){
        let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            this.markers.length = 0;
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            this.mapCenter = [center.lng, center.lat];
          }
      },
      setPos(pos){
        let {lnglat, type=""} = pos;
        let {lng, lat} = lnglat;
        if(!lng){
          this.mapCenter = ['121.414097', '31.173325'];
          return;
        }
        if(type !== "dragend"){
          this.picPos.pos = [lng, lat];
        }
        this.mapCenter = [lng, lat];
        this.params.value = [lng, lat];
        this.params.show = [lng, lat].join(",");
        this.$emit("onchange", this.params);
      },
      addMarker({lng, lat}){
        this.markers.push([lng, lat]);
      },
      confirm(){
        this.$emit("onconfirm", this.params);
      },
      oncancel(){
        this.$emit("oncancel");
      }
    },
    watch: {
      data:{
        immediate: true,
        handler(val) {
          let {lng, lat, name, value} = val;
          this.params.name = name;
          this.setPos({lnglat: value});
        }
      },
      active:{
        immediate: true,
        handler(val) {

        }
      }
    },
    props:{
      data:{
        type:Object,
        default(){
          return {}
        }
      },
      value:{},
      type:{},
      active:{
        type:Boolean,
        default(){
          return false
        }
      },
      withPop:{
        type:Boolean,
        default(){
          return false
        }
      }
    }
  };
</script>

<style lang="less">
  .map-wrapper{
    position: relative;
    min-height: 500px;
    z-index: 0;
    .map-lyer.form{
      position: absolute;
      right: 10px;
      left:10px;
      top:10px;
      z-index: 9;
    }
    .ui.form .fields>.field{
      background-color: transparent;
      &:first-child{
        margin-right: 20px;
      }
    }
    .el-vue-search-box-container{
      height: auto!important;
      min-width: 240px;
      width: auto;
      .search-box-wrapper{
        padding: 0;
      }
      input[type='text']{
        height: auto;
        border-top-right-radius: 0!important;
        border-bottom-right-radius: 0!important;
        border-right-color: transparent!important;
      }
      .search-btn{
        background-color: #27292a!important;
        height: 37px!important;
        border-radius: 0 3px 3px 0;
        box-sizing: border-box;
        color: #fff;
        text-shadow: none;
        background-image: none;
      }
    }
    #mapContainer{
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

</style>